import { Tabs, SearchBar, Button, Empty } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './distribute.less'

export default function DistributeRecordsPage() {
  const navigate = useNavigate()
  const hasShopBound = false
  return (
    <div className="distribute-page">
      <div className="top-bar">
        <Tabs defaultActiveKey='all'>
          <Tabs.Tab title='全部' key='all' />
          <Tabs.Tab title='待铺货' key='todo' />
          <Tabs.Tab title='铺货中' key='doing' />
          <Tabs.Tab title='铺货成功' key='done' />
        </Tabs>
      </div>

      <div className="search-row">
        <SearchBar placeholder='输入搜索关键词' clearable={false} />
        <Button size='small' color='primary' className='search-btn'>搜索</Button>
      </div>

      {hasShopBound ? (
        <div className="list">
          {/* 列表占位 */}
        </div>
      ) : (
        <div className="empty-wrap">
          <Empty description='暂无店铺' />
          <Button color='primary' onClick={() => navigate('/shops')}>立即绑定</Button>
        </div>
      )}

      <div className="bottom-space" />
    </div>
  )
}
